<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>

	<!--需要将默认css样式清除-->
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<!--引入自己的css样式-->
	<link rel="stylesheet" type="text/css" href="css/index.css">

</head>
<body>
<div>
	<!--
	外套 wrap ------------------用于最外层
	头部 header ----------------用于头部
	主要内容 main ------------用于主体内容（中部）
	左侧 main-left -------------左侧布局
	右侧 main-right -----------右侧布局
	导航条 nav -----------------网页菜单导航条
	内容 content,container ---------------用于网页中部主体
	底部 footer -----------------用于底部
	-->
	<div>
		<!--导航栏整体属性设置-->
		<div class="site-top-bar">
			<!--整体容器类-->
			<div class="container">
				<!--导航栏-->
				<div class="top-bar-nav">
					<a href="#">小米商城</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">MIUI</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">IoT</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">云服务</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">天星数科</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">有品</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">小爱开放平台</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">企业团购</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">资质证照</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">协议规则</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">下载app</a>
					<span class="sep">|</span>
					<a href="#" target="_blank">智能生活</a>
					<span class="sep">|</span>
					<a href="#">Select Location</a>
				</div>
				<!--购物车-->
				<div class="top-bar-cart">
					<a href="#" class="cart-mini">
						<em class="iconfont-cart"></em>
						<em class="iconfont-cart-full hide"></em>
						购物车
						<span class="cart-mini-num">（0）</span>
					</a>
				</div>
				<!--导航栏中 用户 登录和注册和消息-->
				<div class="top-bar-info">
					<a href="#" class="link">登录</a>
					<span class="sep">|</span>
					<a href="#" class="link">注册</a>
					<span class="sep">|</span>
					<span class="message">
					<a href="#">消息通知</a>
				</span>
				</div>
			</div>

		</div>
		<!--主页头部信息-->
		<div class="site-header">
			<div class="container">
				<div class="header-logo">
					<a href="#" title="小米官网" class="logo ir">小米官网</a>
				</div>
				<!--全部分类导航栏-->
				<div class="header-nav">
					<ul class="nav-list">

						<li class="nav-category">
							<a href="#" class="link-category">
								<span class="text">全部商品分类</span>
							</a>
							<!--最左边的菜单列表-->
							<div class="site-category" style="display: block;">
								<ul class="site-category-list site-category-list-custom">
									<li><a href="#" class="title">手机 电话卡</a></li>
									<li><a href="#" class="title">电视 盒子</a></li>
									<li><a href="#" class="title">笔记本 显示器</a></li>
									<li><a href="#" class="title">家电 插线板</a></li>
									<li><a href="#" class="title">出行 穿戴</a></li>
									<li><a href="#" class="title">智能 路由器</a></li>
									<li><a href="#" class="title">电源 配件</a></li>
									<li><a href="#" class="title">健康 儿童</a></li>
									<li><a href="#" class="title">耳机 音箱</a></li>
									<li><a href="#" class="title">生活 箱包</a></li>
								</ul>
							</div>
						</li>

						<li data-index="0" class="nav-item">
							<a href="#" class="link">
								<span class="text">小米手机</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="1" class="nav-item">
							<a href="#" class="link">
								<span class="text">Redmi 红米</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="2" class="nav-item">
							<a href="#" class="link">
								<span class="text">电视</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="3" class="nav-item">
							<a href="#" class="link">
								<span class="text">笔记本</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="4" class="nav-item">
							<a href="#" class="link">
								<span class="text">家电</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="5" class="nav-item">
							<a href="#" class="link">
								<span class="text">路由器</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="6" class="nav-item">
							<a href="#" class="link">
								<span class="text">智能硬件</span>
							</a>
							<div class="item-children"></div>
						</li>
						<li data-index="7" class="nav-item">
							<a href="#" target="_blank" class="link">
								<span class="text">服务</span>
							</a>
						</li>
						<li data-index="8" class="nav-item">
							<a href="#" target="_blank" class="link">
								<span class="text">社区</span>
							</a>
						</li>
					</ul>
				</div>
				<!--站内搜索-->
				<div class="header-search">
					<form action="#" class="search-form clearfix">
						<label for="search" class="hide">站内搜索</label>
						<a class="no-style-msq">
							<input type="search" id="search" name="keyword" autocomplete="off"
								   class="search-text" placeholder="【立减30元】Note 9 5G">
						</a>
						<a class="no-style-msq">
							<input type="submit" value="" class="search-btn iconfont">
						</a>
						<div class="search-hot-words"></div>
						<div class="keyword-list hide">
							<ul class="result-list"></ul>
						</div>
					</form>
				</div>
			</div>
		</div>

	</div>

	<!--页面最上部发布的新品信息和分类信息-->
	<div class="home-hero-container container">
		<div class="home-hero">
			<div class="swiper-container home-hero-swiper swiper-no-swiping swiper-container-fade swiper-container-initialized swiper-container-horizontal">
				<!--五张轮巡图片-->
				<div class="swiper-wrapper" style="transition-duration: 0ms;">
					<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="4"
						 style="width: 1226px; transition-duration: 0ms; opacity: 1; transform: translate3d(0px, 0px, 0px);">
						<a target="_blank" href="#" data-settrack="true">
							<img alt="" class="swiper-lazy swiper-lazy-loaded"
								 src="./images/feaa15536e63d1840709299b005b7b40.jpg">
						</a>
					</div>
					<div class="swiper-slide" data-swiper-slide-index="0"
						 style="width: 1226px; transition-duration: 0ms; opacity: 1; transform: translate3d(-1226px, 0px, 0px);">
						<a target="_blank" href="#" data-settrack="true">
							<img src="./images/c06ccd53d2e29ac54e5f2da68f56bbee.jpg" alt=""
								 class="swiper-lazy swiper-lazy-loaded">
						</a>
					</div>
					<div class="swiper-slide swiper-slide-prev" data-swiper-slide-index="1"
						 style="width: 1226px; transition-duration: 0ms; opacity: 1; transform: translate3d(-2452px, 0px, 0px);">
						<a target="_blank" href="#" data-settrack="true">
							<img
									alt="" class="swiper-lazy swiper-lazy-loaded"
									src="./images/da263304f9d2936c0d132003f3d5d056.jpg"></a></div>
					<div class="swiper-slide swiper-slide-active" data-swiper-slide-index="2"
						 style="width: 1226px; transition-duration: 0ms; opacity: 1; transform: translate3d(-3678px, 0px, 0px);">
						<a target="_blank" href="#"
						   data-settrack="true"><img
								alt="" class="swiper-lazy swiper-lazy-loaded"
								src="./images/7ba16ae1893689b362837c1143e3bd3b.jpeg"></a></div>
					<div class="swiper-slide swiper-slide-next" data-swiper-slide-index="3"
						 style="width: 1226px; transition-duration: 0ms; opacity: 0; transform: translate3d(-4904px, 0px, 0px);">
						<a target="_blank" href="#"
						   data-settrack="true"><img
								alt="" class="swiper-lazy swiper-lazy-loaded"
								src="./images/11117680d1eef6cdf2c26cb1e6f793cd.jpeg"></a></div>
					<div class="swiper-slide" data-swiper-slide-index="4"
						 style="width: 1226px; transition-duration: 0ms; opacity: 0; transform: translate3d(-6130px, 0px, 0px);">
						<a target="_blank" href="#"
						   data-settrack="true">
							<img alt="" class="swiper-lazy swiper-lazy-loaded"
								 src="./images/feaa15536e63d1840709299b005b7b40.jpg">
						</a>
					</div>
					<div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="0"
						 style="width: 1226px; transition-duration: 0ms; opacity: 0; transform: translate3d(-7356px, 0px, 0px);">
						<a target="_blank" href="https://www.mi.com/mi10s"
						   data-settrack="true">
							<img src="./images/c06ccd53d2e29ac54e5f2da68f56bbee.jpg" alt=""
								 class="swiper-lazy swiper-lazy-loaded">
						</a>
					</div>
				</div>

			</div>

			<!--下面四个模块 -->
			<div class="home-hero-sub row">
				<!--左边六个小模块-->
				<div class="span4">
					<ul class="home-channel-list clearfix">
						<li>
							<a target="_blank" href="#" data-settrack="true">
								<img src="./images/82abdba456e8caaea5848a0cddce03db.png" alt="小米秒杀">
								小米秒杀
							</a>
						</li>
						<li>
							<a target="_blank" href="#" data-settrack="true">
								<img src="./images/806f2dfb2d27978e33fe3815d3851fa3.png" alt="企业团购">
								企业团购
							</a>
						</li>
						<li>
							<a target="_blank" href="#" data-settrack="true">
								<img src="./images/eded6fa3b897a058163e2485532c4f10.png" alt="F码通道">
								F码通道
							</a>
						</li>
						<li>
							<a target="_blank" href="#" data-settrack="true">
								<img src="./images/43a3195efa6a3cc7662efed8e7abe8bf.png" alt="米粉卡">
								米粉卡
							</a>
						</li>
						<li>
							<a target="_blank" href="#" data-settrack="true">
								<img src="./images/f4846bca6010a0deb9f85464409862af.png" alt="以旧换新">
								以旧换新
							</a>
						</li>
						<li>
							<a target="_blank" href="#" data-settrack="true">
								<img src="./images/9a76d7636b08e0988efb4fc384ae497b.png" alt="话费充值">
								话费充值
							</a>
						</li>
					</ul>
				</div>
				<!--下面三个商品-->
				<div class="span16">
					<ul class="home-promo-list clearfix">
						<li class=" first ">
							<a target="_blank" href="#"
							   data-settrack="true">
								<img src="./images/5d4298059889417157e8492750328492.jpg">
							</a>
						</li>
						<li>
							<a target="_blank" href="#"
							   data-settrack="true">
								<img src="./images/8a43378b96501d7e227a9018fe2668c5.jpg">
							</a>
						</li>
						<li>
							<a target="_blank" href="#"
							   data-settrack="true">
								<img src="./images/793913688bfaee26b755a0b0cc8575fd.jpg">
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>


	<div class="main">
		<div></div>
	</div>
	<div class="footer">
	</div>
</div>
</body>
</html>